<template>
  <div class="add-address">
    <div class="session">
      <ul class="s-ul">
        <li>
          <div class="li-left">
            <span>收货人</span>
          </div>
          <div class="li-right">
            <input type="text" placeholder="请输入" v-model.trim="name">
          </div>
        </li>
        <li>
          <div class="li-left">
            <span>手机号码</span>
          </div>
          <div class="li-right">
            <input type="tel" placeholder="请输入" v-model.trim="phone">
          </div>
        </li>
        <li>
          <div class="li-left">
            <span>地址</span>
          </div>
          <div class="li-right">
            <div class="lr-slider" @click="addrPop()">{{address}}</div>
            <img src="../../../assets/images/location2-icon.png" alt="">
          </div>
        </li>
        <li>
          <div class="li-row">
            <textarea maxlength="30" placeholder="详细地址" v-model.trim="addressDetails"></textarea>
          </div>
        </li>
        <!--<li>-->
          <!--<div class="li-row">-->
            <!--<textarea maxlength="20" placeholder="添加备注(不超过20字)" v-model.trim="addressDetails"></textarea>-->
          <!--</div>-->
        <!--</li>-->
      </ul>
    </div>
    <div class="session">
      <div class="set-btn">
        <span class="set-default">设为默认地址</span>
        <div class="switch-box">
          <div class="swich">
            <input type="checkbox" value="" name=""/>
            <div class="box">
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--保存-->
    <div class="save-btn" @click="saveBtn">保存</div>
    <!--删除-->
    <div v-if="from==1" class="save-btn del-btn" @click="openPop=true">删除收货地址</div>
    <!--地址选择弹窗-->
    <div class="addr-pop"  :class="{popToggle:showAddr}">
      <div style="width:100%;height:100%;" @click="showAddr=false;"></div>
      <div class="ap-bg">
        <div class="confrim-btn"><span @click="confoirmBtn()">确定</span></div>
        <city-picker></city-picker>
      </div>
    </div>
    <!--删除弹窗-->
    <div class="close-pop" v-if="openPop">
      <div class="close-bg">
        <p>确定要删除该地址吗？</p>
        <div class="row">
          <div class="r-left" @click="cancelBtn">取消</div>
          <div class="r-right" @click="confirmBtn">删除</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import global from '../../public/global.vue'
  export default {
    name: 'name',
    data() {
      return {
        from: 0,//判断页面来源 0 是添加  1是编辑
        showAddr: false,//显示地址弹窗
        address: "请选择",//选择后的地址
        openPop:false,//删除弹窗
        addressDetails:'',
        name:'',
        phone:'',
      }
    },
    methods: {
      //地址弹窗
      addrPop() {
        this.showAddr = true;
      },
      //确定 所选地址
      confoirmBtn() {
        let data = this.$children[0]._data;
        this.showAddr = false;
        this.address = data.selectProvince + data.selectCity + data.selectCounty;
      },
      //保存
      saveBtn(){
        let self=this;
        let userAddress=new Object();
        if(this.phone==""||this.addressDetails==""||this.name==""||this.phone==null||this.addressDetails==null||this.name==null){
          alert("请正确输入");
          return;
        }
          userAddress.phone=this.phone;
          userAddress.name=this.name;
          userAddress.address=this.address;
          userAddress.addressDetails=this.addressDetails;
          userAddress.defaults=2;


        let box = document.querySelector('.swich');
        let checkbox = box.querySelector("input");

        if(checkbox.checked){
          userAddress.defaults=1;
        }




        if(this.from!=0){
          userAddress.id=this.from;

        }
        let params = new URLSearchParams();
        params.append('userAddress', JSON.stringify(userAddress));
        self.$http({
          url: global.apiUrl + '/userAddress/creadeAddr',
          method: 'post',
          data: params,
        }).then(res => {
          alert(res.data.msg);
          setTimeout(function () {
            self.$router.go(-1)
          }, 1500 )

        })

      },
      //删除弹窗  取消
      cancelBtn(){
        this.openPop=false;
      },
      //删除弹窗  删除
      confirmBtn(){
        this.openPop=false;
      },
    },
    created: function () {
      document.title = "添加收货地址"
    },
    mounted: function () {
      let self=this;
      //设为默认地址
      let box = document.querySelector('.swich');
      let checkbox = box.querySelector("input");
      box.onclick = function () {
        this.classList.toggle("swich-on");
        checkbox.checked = !checkbox.checked;
        console.log(checkbox.checked);
      }
      this.from = this.$route.query.from;
      //判断页面来源
      if(this.from!=0){
        self.$http.get(global.apiUrl+"/userAddress/getAddress?id="+self.from ).then((res) => {
          self.address=res.data.data.address;
          self.addressDetails=res.data.data.addressDetails;
          self.name=res.data.data.name;
          self.phone=res.data.data.phone;
          if(res.data.data.defaults==1){
            let box = document.querySelector('.swich');
            let checkbox = box.querySelector("input");
            checkbox.checked=true;
            box.classList.add("swich-on");
          }
        })
      }
      console.log(this.$children.data);
    },
    updated: function () {

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .add-address {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f3f3f3;
    .session {
      width: 100%;
      padding: 0 2.5%;
      background: #fff;
      margin-bottom: 10px;
      font-size: 1rem;
      color: #333;
      .s-ul {
        width: 100%;
        li {
          width: 100%;
          padding: 3% 0;
          border-bottom: 1px solid #eee;
          display: flex;
          .li-left {
            flex: 3;
            color: #777;
          }
          .li-right {
            flex: 7;
            .lr-slider {
              display: inline-block;
              width: 90%;
            }
            img {
              float: right;
              width: 14px;
            }
            input {
              width: 100%;
              border: none;
              font-size: 0.9rem;
            }
          }
          .li-row {
            width: 100%;
            textarea {
              width: 100%;
              resize: none;
              font-size: 1rem;
              border: none;
            }
          }
        }
      }
      .set-btn {
        width: 100%;
        padding: 3% 0;
        display: flex;
        justify-content: space-between;
        .set-default {
          height: 30px;
          line-height: 30px;
        }
        .switch-box {
          .swich .box {
            width: 60px;
            height: 30px;
            background: #ccc;
            border-radius: 20px;
            transition: all .5s ease;
          }
          .swich input {
            display: none;
          }
          .swich .box span {
            display: inline-block;
            height: 30px;
            width: 30px;
            border-radius: 15px;
            background: #fff;
            transform: translateX(0px);
            transition: all .5s ease;
          }
          .swich-on .box {
            background: #D43F3F;
            transition: all .5s ease;
          }
          .swich-on .box span {
            transform: translateX(30px);
            transition: all .5s ease;
          }
        }
      }
    }
    /*保存*/
    .save-btn {
      width: 90%;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      font-size: 1rem;
      color: #fff;
      margin: 50px auto 0;
      background: #d43f3f;
      border-radius: 6px;
      letter-spacing: 0.5rem;
    }
    .del-btn {
      margin-top: 20px;
      background: #ddd;
      letter-spacing: normal;
    }
    /*地址弹窗*/
    .addr-pop {
      position: absolute;
      top: 100%;
      left: 0;
      background: transparent;
      padding: 0 1%;
      width: 100%;
      height: 100%;
      transition: all .5s;
      .ap-bg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 410px;
        background: #eee;
      }
      .confrim-btn {
        width: 100%;
        padding: 2.5% 2.5%;
        text-align: right;
        span {
          font-size: 0.9rem;
          border: 1px solid #09BB07;
          color: #09BB07;
          padding: 3px 3%;
          border-radius: 5px;
        }
      }

    }
    .popToggle {
      top: 0;
    }
    /*删除弹窗*/
    .close-pop {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.5);
      .close-bg {
        position: absolute;
        top: 40%;
        left: 0;
        right: 0;
        margin: auto;
        width: 80%;
        background: #fff;
        border-radius: 6px;
        padding:3%;
        p{
          font-size: 1rem;
          height:3rem;
          line-height: 3.6rem;
          text-align: center;
          border-bottom:1px solid #eee;
        }
        .row{
          width:100%;
          line-height: 2rem;
          display: flex;
          padding:3% 0 0;
          text-align: center;
          .r-left{
            flex: 1;
            height:2rem;
            color:#aaa;
            border-right:1px solid #eee;
          }
          .r-right{
            flex: 1;
            height:2rem;
            color:#ff0000;
          }
        }
      }
    }
  }
</style>
